<template>
  <view class="flex-col page">
    <view class="search_wrapper" style="position: sticky; top: 0; z-index: 1">
      <view class="search">
        <view class="flex-row rows1">
          <view @tap.stop="opencity()" style="display: flex; flex: 1">
            <text class="text">{{ city }}</text>
            <u-icon
              class="content_col10"
              name="arrow-down-fill"
              color="#38987c"
              size="14"
            ></u-icon>
          </view>

          <view class="b5">
            <u--input
              confirm-type="search"
              @blur="confirm"
              @confirm="confirm"
              class="text_1"
              placeholder="请输入技师名字"
              border="none"
              suffixIcon="search"
              fontSize="28rpx"
              suffixIconStyle="font-size:25px; color:#727272; margin-right:8px;"
              v-model="value"
            ></u--input>
          </view>
        </view>
      </view>
      <view class="btn-list">
        <view :class="listType == 1 ? 'active' : ''" @click="loadTypeList(1)"
          >距离最近</view
        >
        <view :class="listType == 0 ? 'active' : ''" @click="loadTypeList(0)"
          >优质推荐</view
        >
        <view :class="listType == 2 ? 'active' : ''" @click="loadTypeList(2)"
          >最新入驻</view
        >
      </view>
    </view>
    <List :list="dataList" ref="list" @parent-event="reloadTech" :license="license"></List>
  </view>
</template>

<script>
import zNo from "@/components/z-no/index.vue";
import List from "@/components/dataList/index.vue";
import base from "../../config/baseUrl";
import { checkSystemEnableLocation } from "@/js_sdk/wa-permission/permission.js";
import { checkOpenGPSServiceByAndroid } from "@/utils/openSettings.js";
export default {
  data() {
    return {
      listType: 1,
      listbJVHRZ5E: [],
      latitude: "",
      longitude: "",
      value: "",
      dataList: [],
      total: 0,
      loading: true,
      page: 1,
      city: "定位中",
      local: 0,
      addressFlg: false,
      showInfo: false,
      technician: {
        nickname: "",
        realname: "",
        avatar: "",
        album: [],
        praise: "",
        sales: 0,
        credit: -1,
        service: "",
        height: 0,
        birthday: 0,
        practice: 0,
        profile: "0",
        collect: 0,
        province: "",
      },
      service: [],
      collect: "",
      comment: [],
      technician_id: "",
      tecount: 1,
      tevalue: 1,
      commentShow: false,
      initLocation: "",
	  license: null
    };
  },
  components: {
    zNo,
    List,
  },
  onLoad() {
	this.license = uni.getStorageSync("app-license")
    this.loadinit();
  },
  onShow() {
    const map = uni.getStorageSync("map_tip");
    if (map) {
      // 更新地图
	  this.$refs.list.loading = true;
      this.loadinit();
      uni.removeStorageSync("map_tip");
    }
  },
  methods: {
    reloadTech() {
      const isPermisi = checkSystemEnableLocation();
      if (isPermisi) {
        uni.getLocation({
          type: "wgs84",
          highAccuracy: true, // 开启高精度
          success: (res) => {
            let { latitude, longitude } = res;
            this.saveLocation(latitude, longitude);
          },
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "您未开启定位，无法准确分配附近技师",
        });
      }
    },
    saveLocation(lat, lng) {
      this.$http
        .post("api/wechat/getMapAddress", {
          location: `${lat},${lng}`,
        })
        .then((address) => {
          let { ad_info, address: street, address_component } = address.result;
          let { location } = ad_info;
          ad_info.latitude = location.lat;
          ad_info.longitude = location.lng;
          ad_info.address = street;

          ad_info.lat = location.lat;
          ad_info.lng = location.lng;

          uni.setStorageSync("address_info", ad_info);
          this.city = ad_info.district;
          this.latitude = location.lat;
          this.longitude = location.lng;
          this.init();
          uni.setStorageSync("location", location);
        });
    },
    async getInfo(id) {
      this.technician_id = id;
      let data = await this.$http.post("api/technician/details", {
        id: id,
      });
      for (let i in data) {
        this[i] = data[i];
      }
    },
    previewimage(imageUrl) {
      //预览图片
      uni.showToast({
        icon: "none",
        title: "左右滑动查看更多",
      });
      var images = [];
      images.push(imageUrl);
      uni.previewImage({
        // 图片路径必须是一个数组 => ['']
        current: 0,
        urls: imageUrl,
        indicator: "default",
      });
    },
    loadinit() {
      // 获取当前定位地址
      let address = uni.getStorageSync("address_info");
      if (address) {
        this.city = address.district;
        this.latitude = address.location.lat;
        this.longitude = address.location.lng;
      }
      this.init();
    },
    loadTypeList(i) {
      if (this.listType == i) {
        return;
      }
	  this.$refs.list.loading = true;
      this.listType = i;
      this.init();
    },
    init() {
      let obj = {
        lat: this.latitude,
        lng: this.longitude,
        type: this.listType,
        page: 1,
		license: this.license
      };
      if (this.value) {
        obj.realname = this.value;
      }
      this.$http.post("api/technician/newlist", obj).then((res) => {
          this.$refs.list.loading = false;
          this.$refs.list.isNodata = res.list?.length < 1 ? true : false;
          this.dataList = res.list;
          this.total = res.list.length;
        })
        .catch((err) => {
          uni.showToast({
            title: "技师获取失败",
            icon: "error",
          });
        });
    },
    confirm() {
      this.page = 1;
      this.dataList = [];
      this.total = null;
      this.init();
    },
    opencity() {
      uni.navigateTo({
        url: "/pages/map/index",
      });
    },
    toPath(item) {
      this.commentShow = false;
      this.getInfo(item.id);
      this.showInfo = true;
    },
    toComment(item) {
      this.getInfo(item.id);
      this.showInfo = true;
      this.commentShow = true;
    },
    close() {
      this.showInfo = false;
    },
  },
  onPullDownRefresh() {
    let _self = this;
    this.$refs.list.loading = true;
    setTimeout(() => {
      uni.stopPullDownRefresh(); //停止当前页面下拉刷新
      this.page = 1;
      this.dataList = [];
      this.total = null;
      this.init();
    }, 500);
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f7f7f7;
  height: 100%;
  width: 100%;
  padding-bottom: 20rpx;

  .info-head {
    background-color: #f7f7f7;
    padding: 25rpx 20rpx 0 20rpx;

    .head-wrpper {
      height: 200rpx;
      background: #ffffff;
      border-radius: 18rpx;
      border: 2rpx solid #1dd39b;

      .section_2 {
        padding: 20rpx;

        .image {
          margin-right: 10rpx;
        }

        .text-group_6 {
          .section_4 {
            width: 500rpx;
            justify-content: space-around;
            margin-top: 10rpx;

            .icon_3 {
              width: 25rpx;
              height: 25rpx;
              margin-top: 3rpx;
              margin-right: 8rpx;
            }

            .text_1 {
              font-size: 24rpx;
            }
          }

          .paragraph_1 {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #767676;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; // 想要超出三行显示 就把这里改成3就好了
          }
        }
      }
    }

    .center-wrpper {
      margin-top: 20rpx;
      justify-content: space-around;
      height: 700rpx;
      overflow-y: scroll;

      .comment {
        padding: 20rpx;
        background: #ffffff;
        color: #767676;
        border-radius: 18rpx;
        margin-bottom: 20rpx;
        font-size: 27rpx;

        .comment1 {
          font-size: 26rpx;
        }

        .comment2 {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #767676;
          padding: 5rpx 0;
        }

        .comment3 {
          flex-wrap: wrap;

          .comment3-item {
            padding: 5rpx 20rpx;
            background: #efefef;
            border-radius: 5rpx;
            margin-right: 16rpx;
            margin-top: 10rpx;
            color: #767676;
          }
        }
      }

      .item-wrpper {
        padding: 20rpx;
        background: #ffffff;
        border-radius: 18rpx;
        margin-bottom: 20rpx;
        position: relative;

        .icon_6 {
          width: 100rpx;
          height: 50rpx;
          font-size: 28rpx;
          line-height: 50rpx;
          text-align: center;
          color: #ffffff;
          background: #1dd39b;
          border-radius: 14rpx;
          position: absolute;
          bottom: 10px;
          right: 10px;
        }

        .group_2 {
          margin-left: 20rpx;
          width: 400rpx;

          .left-group {
            white-space: nowrap;

            .text_16 {
              color: #ff6100;
              font-size: 24rpx;
            }

            .price-font1 {
              font-size: 22rpx;
              color: #727272;
              margin-left: 8rpx;
            }

            .text_14 {
              font-size: 22rpx;
              color: #727272;
            }

            .text_18 {
              font-family: Price-Bold;
              color: #ff6100;
              font-size: 32rpx;
            }
          }

          .text-wrapper_2 {
            .title {
              font-size: 30rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
            }

            .title1 {
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #727272;
              margin-left: 10rpx;
              margin-top: 8rpx;
            }
          }
        }
      }
    }
  }

  .no {
    padding-top: 300rpx;
  }

  .search_wrapper {
    padding: 0rpx 32rpx;
    background: #fff;

    .search {
      padding: 10rpx 0rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 32rpx;

      .image {
        width: 44rpx;
        height: 44rpx;
      }

      .text {
        color: #333;
        font-size: 28rpx;
        line-height: 50rpx;
        white-space: nowrap;
      }

      .text_1 {
        margin-left: 24rpx;
        color: rgb(153, 153, 153);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
  }

  .section_1 {
    padding: 0 32rpx 250rpx;

    .group_1 {
      margin-top: 15rpx;
      color: rgb(255, 255, 255);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      .group_3 {
        margin-left: 54rpx;

        .image_4 {
          margin-bottom: 4rpx;
          width: 28rpx;
          height: 34rpx;
        }

        .text_3 {
          margin-left: 14rpx;
        }
      }

      .image_3 {
        width: 40rpx;
        height: 40rpx;
      }

      .text_2 {
        margin-left: 8rpx;
      }
    }
  }

  .list {
    margin-top: -246rpx;
    padding: 0 32rpx;
    position: relative;

    .list-item {
      padding: 20rpx;
      padding-left: 10rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 28rpx;

      &:not(:first-of-type) {
        margin-top: 20rpx;
      }

      .left-section {
        padding-top: 140rpx;
        color: rgb(255, 255, 255);
        font-size: 24rpx;
        line-height: 34rpx;
        white-space: nowrap;
        border-radius: 50%;

        background-position: 0px 0px;
        background-size: cover;
        background-repeat: no-repeat;
        width: 140rpx;
        // height: 140rpx;
        position: relative;

        .image_5 {
          width: 35rpx;
          height: 22rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .text-wrapper {
          padding-bottom: -20rpx;
          background-color: rgb(24, 181, 103);
          border-radius: 18rpx;
          padding: 0 10rpx;
          font-size: 23rpx;
          position: relative;
        }
      }

      .center-group {
        margin-left: 16rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 0 4rpx 0;

        .group_4 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;

          .text_5 {
            color: rgb(0, 0, 0);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            white-space: nowrap;
          }

          .text_6 {
            color: #333;
            font-size: 30rpx;
            font-weight: 600;
            line-height: initial;
            white-space: initial;
          }

          .image_7 {
            margin: 4rpx 0 4rpx 8rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .group_5 {
          margin-top: 0rpx;
          color: rgb(153, 153, 153);
          font-size: 20rpx;
          line-height: 28rpx;
          white-space: nowrap;

          .image_9 {
            width: 80rpx;
            height: 24rpx;
          }

          .image_11 {
            margin-left: 4rpx;
            width: 52rpx;
            height: 24rpx;
          }

          .text_7 {
            margin-left: 8rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6100;
            margin-right: 6px;
          }
        }

        .group_6 {
          margin-top: 0rpx;
          color: rgb(243, 151, 53);
          font-size: 22rpx;
          line-height: 34rpx;
          white-space: nowrap;

          .left-text-wrapper {
            padding: 2rpx 0 4rpx;
            background-color: rgba(243, 151, 53, 0.16);
            border-radius: 8rpx;
            height: 30rpx;

            .text_9 {
              margin-left: 12rpx;
              margin-right: 10rpx;
            }
          }

          .right-text-wrapper {
            margin-left: 8rpx;
            padding: 2rpx 10rpx 4rpx;
            background-color: rgba(243, 151, 53, 0.16);
            border-radius: 8rpx;
            height: 40rpx;
          }
        }

        .group_7 {
          margin-top: 16rpx;
          color: rgb(153, 153, 153);
          font-size: 20rpx;
          line-height: 28rpx;
          white-space: nowrap;

          .image_13 {
            width: 28rpx;
            height: 33rpx;
            margin-right: 8rpx;
          }

          .text_12 {
            margin-left: 4rpx;
          }

          .text_13 {
            margin-left: initial;
            color: #727272;
            font-size: 24rpx;
          }

          .image_15 {
            margin-left: 18rpx;
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }

          .text_14 {
            margin-left: 4rpx;
          }

          .text_15 {
            margin-left: initial;
            font-size: 24rpx;
            color: #727272;
          }

          .image_17 {
            margin-right: 8rpx;
            width: 36rpx;
            height: 30rpx;
            margin-left: 17rpx;
          }

          .text_16 {
            margin-left: 0rpx;
            font-size: 24rpx;
            color: #727272;
          }

          .text_17 {
            margin-left: initial;
          }
        }
      }

      .right-group {
        display: flex;
        justify-content: space-between;
        padding: 15rpx 0 0rpx 0;

        .top-text-wrapper {
          padding: 4rpx 10rpx 2rpx;
          font-size: 24rpx;
          line-height: 34rpx;
          white-space: nowrap;
          background: #e5fdf5;
          border-radius: 9rpx;
          font-size: 22rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #00d090;
        }

        .opacity-0 {
          opacity: 0;
        }

        .text_19 {
          color: #333;
          font-size: 26rpx;
          white-space: nowrap;
        }

        .bottom-text-wrapper {
          align-self: flex-end;
          color: rgb(255, 255, 255);
          font-size: 26rpx;
          white-space: nowrap;
          background-image: linear-gradient(
            116.3deg,
            rgb(53, 219, 160) 0%,
            rgb(53, 219, 160) -13.77%,
            rgb(24, 181, 103) 111.69%,
            rgb(24, 181, 103) 100%
          );
          width: 156rpx;
          height: 60rpx;
          background: #38987c;
          border-radius: 12rpx;
          line-height: 60rpx;
        }

        .gayer {
          background: rgba(228, 228, 228, 1);
        }
      }
    }
  }
}

.pos {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
  border-radius: 50%;
}

.b5 {
  width: 100%;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 28rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
}

.rows1 {
  align-items: center;
}

.imgLey {
  -webkit-animation-name: scaleDraw;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.5s;
}

@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.ul1 {
  width: 128rpx;
  height: 42rpx;
  background: #1dd39b;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.ul2 {
  width: 128rpx;
  height: 42rpx;
  background: #1dd39b;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.ul3 {
  width: 128rpx;
  height: 42rpx;
  border-radius: 21px;
  border: 1px solid #727272;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.moreImg {
  width: 114rpx;
  height: 42rpx;
  color: rgb(56, 152, 124);
  border: rgb(56, 152, 124) 1px solid;
  background-color: #fff;
  border-radius: 9rpx;
  display: inline-block;
  margin-left: 15rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  line-height: 42rpx;
}

.t8 {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
}

.image_71 {
  width: 22rpx;
  height: 26rpx;
  margin-right: 7rpx;
  margin-top: 6rpx;
}

.image_71txt {
  color: #333;
  font-size: 26rpx;
}

.image_6 {
  margin: 4rpx 0;
  width: 32rpx;
  height: 32rpx;
}

.image_5 {
  width: 24rpx;
  height: 24rpx;
  margin-left: 14rpx;
  margin-right: 3rpx;
}

.btn-list {
  display: flex;
  justify-content: flex-start;
  padding: 12px 0;
  font-size: 13px;
}

.btn-list > view {
  padding: 4px 8px;
  background-color: #fff;
  border-radius: 6px;
  margin-right: 16px;
}

.btn-list .active {
  color: #38987c;
  border: #38987c 1px solid;
}
</style>
